{% extends 'base.html' %}

{% block head %}
    <script>
        {#    怎么遍历所有的checkbox??#}
        //js执行更新购物车数据的函数
        function total() {
            var value = 0;  //商品数量
            var total_price = 0.00;  //商品总额
            var total_num = 0;  //商品总数量

            $("input[type=checkbox]").not('#total_check').each(function (i, n) {  //i为遍历值,n为当前对象
                console.log(i);
                value++;
                var unit = $('#' + (i + 1)).find('.col05 span').html(),
                    nums = $('#' + (i + 1)).find('.num_show').val();
                console.log(unit + 'unit');
                console.log(nums + 'nums');
                unit = parseFloat(unit);
                nums = parseInt(nums);
                var unit_total = (unit * nums).toFixed(2);
                var unit_total = (unit * nums);
                $('#' + (i + 1)).find('.col07').html(unit_total.toFixed(2) + '元');


                //如果选中,那么才执行总额相加相减
                if ($('#' + (i + 1)).find('.col01 input').is(':checked')) {
                    total_price += unit_total;
                    total_num += nums;
                }
            });

            $('.settlements em').html(total_price.toFixed(2));


            $('.settlements b').html(total_num);
            {#            $.cookie('cart_num',total_num);#}

            {#            alert(value);#}
            {#  上面value取的值刚好是遍历所有商品的值,这个值可以填充到全部商品最上面那里           #}
            $('.total_count em').html(value);

        }


        //删除列表
        function delete_cart(id, forloop_count) {
            $.post('/cart/del/', {'id': id}, function (data) {
                {#                    total();#}
                if (data.isdelete == 1) {
                    alert('删除不成功,请重试');
                } else {
                    //需要把当前标签删除,$this是没用的
                    //删除时最后一个删掉的时候,还是有信息
                    $('#' + forloop_count).remove();


                }
                total();

            })
        }

        //页面加载完执行函数
        $(function () {
            total();

            //给所有的checkbox绑定一个选中事件
            $("input[type=checkbox]").not('#total_check').click(function () {

                //当未被全部选中的时候,全选按钮为不选中
                if ($("input[type=checkbox]").not('#total_check').length ==
                    $("input[type='checkbox']:checked").not('#total_check').length) {
                    $('#total_check').prop('checked', true);
                } else {
                    $('#total_check').prop('checked', false);
                }
                total()
            });


            //给全选一个点击事件.
            $('#total_check').click(function () {
                if ($('#total_check').prop('checked')) {
                    $("input[type=checkbox]").not('#total_check').prop('checked', true);
                } else {
                    $("input[type=checkbox]").not('#total_check').prop('checked', false);
                }
                total()
            });


            //给数量那里的input标签一个失去焦点事件
            //类似于详情页里面的购物车数量效果
            $('.num_show').blur(function () {
                //发送请求
                var cid = $(this).parents().parents().nextAll(".col08").val(),
                    num = parseInt($(this).val());

                if (isNaN(num)) {
                    num = 1;
                } else if (num >= 5) {
                    num = 5;
                } else if (num <= 1) {
                    num = 1
                }

                $(this).val(num);

                $.get('/cart/changenum/', {'num': num, 'cid': cid}, function (data) {
                    if (data.status == 1) {
                        //成功

                        total();
                    } else {
                        alert('修改失败,请重试')
                    }
                })
            });

            //给数量那里的input标签一个添加功能
            $('.add').click(function () {
                var num = parseInt($(this).next().val());
                num++;
                $(this).next().val(num).blur();

            });

            //给数量那里的input标签一个减功能
            $('.minus').click(function () {
                var num = parseInt($(this).prev().val());
                num--;
                $(this).prev().val(num).blur();

            });


            //submit提交过后就禁用
{#            $('#submit_btn').click(function () {#}
{#                $(this).prop('disabled',true);#}
{#            })#}



            //submit不允许提交未空的数据
            $('#form_submit').submit(function () {
{#                alert('he')#}
                if($(this).find('#is_good').text() <= 0){
                    alert('没有商品可以提交');
                    return false
                }

            })
        })


    </script>


{% endblock head %}


{% block body %}
    <div class="total_count">全部商品<em>0</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>


    {#    提交会提交input选中的name value#}
    <form action="/order/" method="get" id="form_submit">
        {% for foo in carts %}

            <ul class="cart_list_td clearfix" id="{{ forloop.counter }}">
                <li class="col01"><input type="checkbox" name="cid" checked value="{{ foo.id }}"></li>
                <li class="col02"><img src="/static/media/{{ foo.goods.gpic }}"></li>
                <li class="col03">{{ foo.goods.gtitle }}<br><em>{{ foo.goods.gkucun }}</em></li>
                <li class="col04">{{ foo.goods.gunit }}</li>
                <li class="col05"><span id="gprice">{{ foo.goods.gprice }}</span>元</li>
                <li class="col06">
                    <div class="num_add">
                        <a href="javascript:;" class="add fl">+</a>
                        <input type="text" class="num_show fl"  value={{ foo.count }}>
                        <a href="javascript:;" class="minus fl">-</a>
                    </div>
                </li>
                <li class="col07">元</li>
                <li class="col08" value="{{ foo.id }}" id="delete"><a
                        href="javascript:delete_cart({{ foo.id }},{{ forloop.counter }});">删除</a>
                </li>
            </ul>
        {% endfor %}



        <ul class="settlements">
            <li class="col01"><input type="checkbox" name="" checked="" id="total_check"></li>
            <li class="col02">全选</li>
            <li class="col03">合计(不含运费)：<span>¥</span><em>0.00</em><br>共计<b id="is_good">0</b>件商品</li>
            <li class="col04"><input type="submit" value="去结算" id="submit_btn"></li>
{#                <a href="/order/">去结算</a>#}
        </ul>


    </form>
{% endblock body %}